<template>
    <div class="cms-content" id="top" v-loading="loading">
        <components v-if="!isIframe"></components>    
        <!-- 嵌入别的项目页面 -->
        <div v-if="isIframe" >
          <router-view :config-data="iframeConfig"/>
        </div>
    </div>
</template>
<script>
import components from "../main/index.vue"
export default {
    data(){
        return{
            isIframe:false,
            iframeConfig: {
                css: "",
                js: "",
                hostName: "",
                url: "",
            },
        }
    },
    components:{
        components,
    },
    //监听路径变化，如果路径变成了proxy，iframe=true,components隐藏,iframe-page出现
    watch:{
        $route(to){
        const { proxyUrl } = to.query;
        // 如果是 proxy 路由直接获取跳转路由
        if (to.path == '/proxy' && proxyUrl) {
          this.isIframe = true;
          this.$store.dispatch("changeIframe",true);
          this.iframeConfig = {
            hostName: decodeURIComponent(proxyUrl),
            url: '',
            css: '',
            js: ''
          }
          return
        }
    }
}
}
</script>
<style lang="scss" scoped>
.cms-content {
  position: relative;
  min-height: 400px;
  //padding-top: 60px;
  //需要降低层级，不然遮罩还是会挡住头部
  z-index: 0;
  .loading-wrap {
    height: 300px;
  }
}
</style>